<template>
  <div>
    <el-popover
      :disabled="!flag"
      placement="top-start"
      :width="propWidth"
      trigger="hover"
      :content="text"
    >
      <template #reference>
        <div ref="myElement">{{ firstTenCharacters }}</div>
      </template>
    </el-popover>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, nextTick } from 'vue'
type Props = {
  name: string
  text: string
  row: number
  flag: boolean
}
const props = defineProps({
  name: { type: String, required: false },
  text: { type: String, required: false },
  row: { type: Number, required: false },
  flag: { type: Boolean, required: false }
}) as Props

// 展示的文本
const firstTenCharacters = ref('')
const myElement = ref()
onMounted(() => {
  nextTick(() => {
    if (myElement.value) {
      lineCountText()
    }
  })
})

const propsFlag = ref(false)
const propWidth = ref(200)

const lineCountText = () => {
  // 获取元素宽度
  const width = myElement.value.offsetWidth
  propWidth.value = width
  console.log('Width of myElement:', width)
  const computedStyle = window.getComputedStyle(myElement.value)
  // 获取字体大小
  const fontSize = parseFloat(computedStyle.getPropertyValue('font-size'))
  console.log('Font size of myElement:', fontSize)

  // 每行的字符数
  const lineCount = +(width / fontSize).toFixed(0)
  console.log(lineCount)
  console.log(props.row * lineCount)
  console.log(props.text.substring(0, props.row * lineCount - 1))
  console.log(width * props.row, lineCount * fontSize)

  if (width * props.row - fontSize * 1.5 < lineCount * fontSize) {
    propsFlag.value = true
    firstTenCharacters.value = props.text.substring(0, props.row * lineCount - 1) + '...'
  } else {
    firstTenCharacters.value = props.text
  }
}
</script>
